<template>
	<div id="top-invoke-chart-container" ></div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, ref, watchEffect } from 'vue';
import api from '@/api';
import { Chart } from '@antv/g2';
import InterfaceTotalInvokeCountVO = API.InterfaceTotalInvokeCountVO;

interface RenderData {
	TotalInvoke: number;
	InterfaceName: string;
}

const x = 'InterfaceName';
const y = 'TotalInvoke';
const mounted = ref(false);
let chart;
const data = ref<RenderData>([
	{
		InterfaceName: 'string',
		TotalInvoke: 0,
	},
]);
const renderChart = () => {
	chart = new Chart({
		container: 'top-invoke-chart-container',
		autoFit: true,
	});
	chart.interval()
	.coordinate({ transform: [{ type: 'transpose' }] })
	.data(data.value)
	.encode('x', x)
	.encode('y', y);
	chart.render();
};
onBeforeMount(() => {
	api.analysisController.listTop10InvokedInterface().then(response => {
		const array = response.data.data as Array<InterfaceTotalInvokeCountVO>;
		data.value = array.map(item => {
			return {
				InterfaceName: item.interfaceName,
				TotalInvoke: item.totalInvokeCount,
			};
		});
	});
});
onMounted(() => {
	mounted.value = true;
});
watchEffect(() => {
	if (mounted.value) {
		renderChart();
	}
}, [mounted, data]);
</script>

<style scoped>
#top-invoke-chart-container{
	height: 100%;
}
</style>
